<script setup lang="ts">
    import { ref, inject } from 'vue';
    import { ElMessage } from 'element-plus';
    import { ImageBody, MessageType } from '@/services/type';

    import { useChatStore } from '@/stores/chat';

    const chatStore = useChatStore();

    // 属性
    const { message } = defineProps<{ visible: boolean, options: { x: number, y: number }, message: MessageType }>();

    const menu = ref();
    const msg: any = inject('message');
    
    /**
     * 拷贝内容
     */
    const copyContent = () => {
        return new Promise((resolve, reject) => {
            try {
                const input = document.createElement('input');
                // 获取要复制的文本
                input.value = message.body.content; 
                document.body.appendChild(input);
                // 选中文本
                input.select(); 
                // 执行复制操作
                document.execCommand('copy'); 
                // 移除临时的输入框
                document.body.removeChild(input); 
                // 提示
                msg.success("复制成功");
                resolve(message.body.content);
            } catch (error) {
                reject(error)
            }
        })
    }
    
    /**
     * 获取焦点事件
     */
    const handleFocus = () => {
        setTimeout(() => {
            menu.value.focus();
        },1);
    }

    /**
     * 回复消息
     */
    const onReplyMsg = async (message: MessageType) => {
        if (!message) return
        chatStore.currentMsgReply = message;
        menu.value.blur();
    }   

    /**
     * 下载
     */
    const download = () => {
        const { body } = message;
        const url = (body as ImageBody).url;
        if (!url) return;

        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'

        xhr.onreadystatechange = () => {
            // 下载失败提示
            if (xhr.status != 200) {
                return ElMessage.error({ message: '下载失败~', type: 'error' });;
            }
            if (xhr.readyState === 4 && xhr.status === 200) {
                const blob = xhr.response
                let link = document.createElement('a')
                link.href = URL.createObjectURL(blob)
                link.download = '图片_' + Date.now();
                link.dispatchEvent(new MouseEvent('click'))
                link.remove()
            }
        }

        xhr.send();
    }

    // 对外暴露handleFocus函数
    defineExpose({ handleFocus })
</script>
<template>
     <!-- 自定义右键功能 -->
     <ul 
        v-if="visible"
        ref="menu"
        :style="{ left: options.x + 'px', top: options.y + 'px' }" 
        class="contextmenu" 
        tabindex="1" 
        @blur="$emit('hide')"
    >
        <li v-if="message.type === 1">
            <div class="menuitem" @click="copyContent">
                <el-icon><CopyDocument /></el-icon> 复制
            </div>
        </li>
        <li v-if="message.type === 3">
            <div class="menuitem" @click="download">
                <el-icon><Download /></el-icon> 下载
            </div>
        </li>
        <li>
            <div class="menuitem" @click="onReplyMsg(message)">
                <el-icon><Connection /></el-icon> 引用
            </div>
        </li>
        <li>
            <div class="menuitem" @click="$emit('delete')">
                <el-icon><Delete /></el-icon> 删除
            </div>
        </li>
    </ul>
</template>
<style lang="less" scoped>
    .contextmenu {
        margin: 0;
        background: #fff;
        z-index: 50;
        list-style: none;
        position: fixed; //关键样式设置固定定位
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        text-align: left;
        padding: 5px;
        li {
            margin: 0;
            width: 70px;
            cursor: pointer;
            color: #000;
            position: relative;
            line-height: 0;
            padding: 2px 0;
            .menuitem {
                padding: 5px;
                font-size: 0.8rem;
                border-radius: 5px;
                display: flex;
                align-items: center;
                i {
                    margin-right: 3px;
                }
                &:hover {
                    background: #EDF2FA;
                }

            }
        }
    }
</style>